<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="Mosaddek">
		<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
		<link rel="shortcut icon" href="img/favicon.html">

		<title>Slider</title>

		<!-- Bootstrap core CSS -->		<!--external css-->		<!-- Custom styles for this template -->
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
		<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
	
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-reset.css" />
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="assets/jquery-ui/jquery-ui-1.10.1.custom.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-responsive.css" />
</head>

	<body>

		<section id="container" class="">
			<!--header start-->
			<header class="header white-bg">
				<div class="sidebar-toggle-box">
					<div data-original-title="Toggle Navigation" data-placement="right" class="icon-reorder tooltips"></div>
				</div>
				<!--logo start-->
				<a href="#" class="logo">Flat<span>lab</span></a>
				<!--logo end-->
				<div class="nav notify-row" id="top_menu">
					<!--  notification start -->
					<ul class="nav top-menu">
						<!-- settings start -->
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<i class="icon-tasks"></i>
								<span class="badge bg-success">6</span>
							</a>
							<ul class="dropdown-menu extended tasks-bar">
								<div class="notify-arrow notify-arrow-green"></div>
								<li>
									<p class="green">You have 6 pending tasks</p>
								</li>
								<li>
									<a href="#">
										<div class="task-info">
											<div class="desc">Dashboard v1.3</div>
											<div class="percent">40%</div>
										</div>
										<div class="progress progress-striped">
											<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
												<span class="sr-only">40% Complete (success)</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="task-info">
											<div class="desc">Database Update</div>
											<div class="percent">60%</div>
										</div>
										<div class="progress progress-striped">
											<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
												<span class="sr-only">60% Complete (warning)</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="task-info">
											<div class="desc">Iphone Development</div>
											<div class="percent">87%</div>
										</div>
										<div class="progress progress-striped">
											<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
												<span class="sr-only">87% Complete</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="task-info">
											<div class="desc">Mobile App</div>
											<div class="percent">33%</div>
										</div>
										<div class="progress progress-striped">
											<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 33%">
												<span class="sr-only">33% Complete (danger)</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="task-info">
											<div class="desc">Dashboard v1.3</div>
											<div class="percent">45%</div>
										</div>
										<div class="progress progress-striped active">
											<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
												<span class="sr-only">45% Complete</span>
											</div>
										</div>

									</a>
								</li>
								<li class="external">
									<a href="#">See All Tasks</a>
								</li>
							</ul>
						</li>
						<!-- settings end -->
						<!-- inbox dropdown start-->
						<li id="header_inbox_bar" class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<i class="icon-envelope-alt"></i>
								<span class="badge bg-important">5</span>
							</a>
							<ul class="dropdown-menu extended inbox">
								<div class="notify-arrow notify-arrow-red"></div>
								<li>
									<p class="red">You have 5 new messages</p>
								</li>
								<li>
									<a href="#">
										<span class="photo"><img alt="avatar" src="img/avatar-mini.jpg"></span>
										<span class="subject">
                                    <span class="from">Jonathan Smith</span>
										<span class="time">Just now</span>
										</span>
										<span class="message">
                                        Hello, this is an example msg.
                                    </span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="photo"><img alt="avatar" src="img/avatar-mini2.jpg"></span>
										<span class="subject">
                                    <span class="from">Jhon Doe</span>
										<span class="time">10 mins</span>
										</span>
										<span class="message">
                                     Hi, Jhon Doe Bhai how are you ?
                                    </span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="photo"><img alt="avatar" src="img/avatar-mini3.jpg"></span>
										<span class="subject">
                                    <span class="from">Jason Stathum</span>
										<span class="time">3 hrs</span>
										</span>
										<span class="message">
                                        This is awesome dashboard.
                                    </span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="photo"><img alt="avatar" src="img/avatar-mini4.jpg"></span>
										<span class="subject">
                                    <span class="from">Jondi Rose</span>
										<span class="time">Just now</span>
										</span>
										<span class="message">
                                        Hello, this is metrolab
                                    </span>
									</a>
								</li>
								<li>
									<a href="#">See all messages</a>
								</li>
							</ul>
						</li>
						<!-- inbox dropdown end -->
						<!-- notification dropdown start-->
						<li id="header_notification_bar" class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">

								<i class="icon-bell-alt"></i>
								<span class="badge bg-warning">7</span>
							</a>
							<ul class="dropdown-menu extended notification">
								<div class="notify-arrow notify-arrow-yellow"></div>
								<li>
									<p class="yellow">You have 7 new notifications</p>
								</li>
								<li>
									<a href="#">
										<span class="label label-danger"><i class="icon-bolt"></i></span> Server #3 overloaded.
										<span class="small italic">34 mins</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="label label-warning"><i class="icon-bell"></i></span> Server #10 not respoding.
										<span class="small italic">1 Hours</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="label label-danger"><i class="icon-bolt"></i></span> Database overloaded 24%.
										<span class="small italic">4 hrs</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="label label-success"><i class="icon-plus"></i></span> New user registered.
										<span class="small italic">Just now</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="label label-info"><i class="icon-bullhorn"></i></span> Application error.
										<span class="small italic">10 mins</span>
									</a>
								</li>
								<li>
									<a href="#">See all notifications</a>
								</li>
							</ul>
						</li>
						<!-- notification dropdown end -->
					</ul>
				</div>
				<div class="top-nav ">
					<ul class="nav pull-right top-menu">
						<li>
							<input type="text" class="form-control search" placeholder="Search">
						</li>
						<!-- user login dropdown start-->
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<img alt="" src="img/avatar1_small.jpg">
								<span class="username">Jhon Doue</span>
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu extended logout">
								<div class="log-arrow-up"></div>
								<li>
									<a href="#"><i class=" icon-suitcase"></i>Profile</a>
								</li>
								<li>
									<a href="#"><i class="icon-cog"></i> Settings</a>
								</li>
								<li>
									<a href="#"><i class="icon-bell-alt"></i> Notification</a>
								</li>
								<li>
									<a href="login.html"><i class="icon-key"></i> Log Out</a>
								</li>
							</ul>
						</li>
						<!-- user login dropdown end -->
					</ul>
				</div>
			</header>
			<!--header end-->
			<!--sidebar start-->
			      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu">
                  <li class="active">
                      <a class="" href="index.html">
                          <i class="icon-dashboard"></i>
                          <span>管理首页</span>
                      </a>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon-book"></i>
                          <span>UI 元素</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="general.html">基础</a></li>
                          <li><a class="" href="buttons.html">按钮</a></li>
                          <li><a class="" href="widget.html">小部件</a></li>
                          <li><a class="" href="slider.html">滑动条</a></li>
                          <li><a class="" href="font_awesome.html">字体icon</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon-cogs"></i>
                          <span>组件</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="grids.html">栅格化布局</a></li>
                          <li><a class="" href="calendar.html">日历</a></li>
                          <li><a class="" href="charts.html">图表</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon-tasks"></i>
                          <span>表单</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="form_component.html">表单 组件</a></li>
                          <li><a class="" href="form_wizard.html">表单 向导</a></li>
                          <li><a class="" href="form_validation.html">表单 验证</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon-th"></i>
                          <span>数据表格</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="basic_table.html">基础表格</a></li>
                          <li><a class="" href="dynamic_table.html">动态表格</a></li>
                      </ul>
                  </li>
                  <li>
                      <a class="" href="inbox.html">
                          <i class="icon-envelope"></i>
                          <span>信息 </span>
                          <span class="label label-danger pull-right mail-info">2</span>
                      </a>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon-glass"></i>
                          <span>其他</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="blank.html">空白页</a></li>
                          <li><a class="" href="profile.html">个人资料</a></li>
                          <li><a class="" href="invoice.html">发票</a></li>
                          <li><a class="" href="404.html">404 错误</a></li>
                          <li><a class="" href="500.html">500 错误</a></li>
                      </ul>
                  </li>
                  <li>
                      <a class="" href="login.html">
                          <i class="icon-user"></i>
                          <span>登录页面</span>
                      </a>
                  </li>
              </ul>
              <!-- sidebar menu end-->
          </div>
      </aside>

			<!--sidebar end-->
			<!--main content start-->
			<section id="main-content">
				<section class="wrapper">
					<!-- page start-->
					<div class="row">
						<div class="col-lg-12">
							<section class="panel">
								<header class="panel-heading">
									jQuery UI Sliders
								</header>
								<div class="panel-body">
									<table class="table sliders">
										<tbody>
											<tr>
												<td style="width:14%">默认</td>
												<td>
													<div id="default-slider" class="slider"></div>
												</td>
											</tr>
											<tr>
												<td>单元增量
												</td>
												<td>
													<div id="snap-inc-slider" class="slider"></div>
													<div class="slider-info">
														Amount ($50 increments):
														<span id="snap-inc-slider-amount"></span>
													</div>
												</td>
											</tr>
											<tr>
												<td>范围</td>
												<td>
													<div id="slider-range" class="slider"></div>
													<div class="slider-info">
														Price range:
														<span id="slider-range-amount"></span>
													</div>
												</td>
											</tr>
											<tr>
												<td>限定最大值</td>
												<td>
													<div id="slider-range-max" class="slider"></div>
													<div class="slider-info">
														Maximum Value:
														<span id="slider-range-max-amount"></span>
													</div>
												</td>
											</tr>
											<tr>
												<td>限定最小值</td>
												<td>
													<div id="slider-range-min" class="slider"></div>
													<div class="slider-info">
														Minimum Value:
														<span class="slider-info" id="slider-range-min-amount"></span>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													图示均衡器</td>
												<td>
													<div id="eq">
														<span>88</span>
														<span>77</span>
														<span>55</span>
														<span>33</span>
														<span>40</span>
														<span>45</span>
														<span>70</span>
													</div>
												</td>
											</tr>
											<tr>
												<td>范围选择</td>
												<td>
													<select name="minbeds" id="minbeds" class="form-control bound-s">
														<option>1</option>
														<option>2</option>
														<option>3</option>
														<option>4</option>
														<option>5</option>
														<option>6</option>
													</select>
												</td>
											</tr>
											<tr>
												<td>垂直条</td>
												<td>
													<div class="slider-vertical-value">
														Value:
														<span class="slider-info" id="slider-vertical-amount"></span>
													</div>
													<div id="slider-vertical" class="slider bg-green" style="height: 250px;"></div>
												</td>
											</tr>
											<tr>
												<td>范围限定(垂直)</td>
												<td>
													<div class="slider-vertical-value">
														Target(Millions):
														<span class="slider-info" id="slider-range-vertical-amount"></span>
													</div>
													<div id="slider-range-vertical" class="slider bg-grey" style="height: 250px;"></div>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</section>
						</div>
					</div>
					<!-- page end-->
				</section>
			</section>
			<!--main content end-->
		</section>

		<!-- js placed at the end of the document so the pages load faster -->
		<!--common script for all pages-->
		<!--script for this page only-->
	
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<script type="text/javascript" src="assets/jquery-ui/jquery-ui-1.10.1.custom.min.js"></script>
<script src="js/common-scripts.js"></script>
<script type="text/javascript" src="js/sliders.js"></script>
</body>

</html>